<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>提取办理进度</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="../../../js/angular.js"></script>
<link rel="stylesheet" href="../../../layui/css/layui.css" media="all">
<script type="text/javascript" src="../../../layui/lay/modules/layer.js"></script>
<script src="../../../layui/jquery-3.2.1.min.js" charset="utf-8"></script>
<script src="../../../layui/layui.js" charset="utf-8"></script>
</head>
<body>

	<fieldset class="layui-elem-field layui-field-title"
		style="margin-top: 30px;">
		<legend>提取办理进度</legend>
	</fieldset>
	<div ng-app="myApp" ng-controller="customersCtrl" align="center">

		<table class="layui-table" style="width:90%">
			<tr align="center" style="background-color:#f1f1f1">
				<td>提取进度</td>
				<td>姓名</td>
				<td>个人账号</td>
				<td>销户原因</td>
				<td>发生额</td>
				<td>申请日期</td>
			</tr>
			<tr ng-repeat="x in names" align="center">

				<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.TQJD }}</td>
				<td ng-if="$even">{{ x.TQJD }}</td>
				<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.XINGMING
					}}</td>
				<td ng-if="$even">{{ x.XINGMING }}</td>
				<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.GRZH }}</td>
				<td ng-if="$even">{{ x.GRZH }}</td>
				<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.XHYY }}</td>
				<td ng-if="$even">{{ x.XHYY }}</td>
				<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.FSE }}</td>
				<td ng-if="$even">{{ x.FSE }}</td>
				<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.SQRQ }}</td>
				<td ng-if="$even">{{ x.SQRQ }}</td>


			</tr>

		</table>
		<div class="layui-btn-group">
			<button class="layui-btn layui-btn-primary layui-btn-sm"
				ng-click="Sy()">首页</button>
			<button class="layui-btn layui-btn-primary layui-btn-sm"
				ng-click="Previous()">上一页</button>
			<button ng-repeat="page in pageList"
				class="layui-btn layui-btn-primary layui-btn-sm"
				ng-click="selectPage(page)">{{ page }}</button>
			<button class="layui-btn layui-btn-primary layui-btn-sm"
				ng-click="Next()">下一页</button>
			<button class="layui-btn layui-btn-primary layui-btn-sm"
				ng-click="Wy()">尾页</button>
			<button class="layui-btn layui-btn-primary layui-btn-sm ">{{selPage}}/{{pages}}</button>
		</div>
	</div>
	<script>
		layui.use('element', function() {
			var $ = layui.jquery, element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
		});
	</script>
	<script type="text/javascript">
	
	function getPath() {  
	     
	        return 'http://'+location.host;
	}
		
		
	</script>
	<script type="text/javascript" src="../../../layui/lay/modules/layer.js"></script>
	<script type="text/javascript" src="../../../layui/layer.ext.js"></script>
	<script>
			var app = angular.module('myApp', []);
		    app.controller('customersCtrl', function($scope, $http) {
			$http.get(getPath() + "/wsyyt/tqbljdcontrller/test").then(
					function(res) {
						$scope.data = res.data.data.RETDATA;//自己打断点看格式:[{},{}]
								if(res.data.code==1){
									layer.msg('提示：'+res.data.CW,{icon: 5});	
									return null;
								}
								$scope.pageSize = 10;//设置显示行数
      $scope.pages = Math.ceil($scope.data.length / $scope.pageSize); //分页数
      $scope.newPages = $scope.pages > 5 ? 5 : $scope.pages;
      $scope.pageList = [];
      $scope.selPage = 1;
      //设置表格数据源(分页)
      $scope.setData= function () {
        $scope.names = $scope.data.slice(($scope.pageSize * ($scope.selPage - 1)), ($scope.selPage * $scope.pageSize));//通过当前页数筛选出表格当前显示数据
      }
      $scope.names = $scope.data.slice(0, $scope.pageSize);
      //分页要repeat的数组
      for (var i = 0; i < $scope.newPages; i++) {
        $scope.pageList.push(i + 1);
      }
      //打印当前选中页索引
      $scope.selectPage = function (page) {
        //不能小于1大于最大
        if (page < 1 || page > $scope.pages) return;
        //最多显示分页数5
        if (page > 2) {
          //因为只显示5个页数，大于2页开始分页转换
          var newpageList = [];
          for (var i = (page - 3) ; i < ((page + 2) > $scope.pages ? $scope.pages : (page + 2)) ; i++) {
            newpageList.push(i + 1);
          }
          $scope.pageList = newpageList;
        }else if (page ==1||page==2) {
          //因为只显示5个页数，大于2页开始分页转换
          var newpageList = [];
          for (var i = 1 ; i < 6; i++) {
            newpageList.push(i);
          }
          $scope.pageList = newpageList;
        }
        $scope.selPage = page;
        $scope.setData();
        $scope.isActivePage(page);
        console.log("选择的页：" + page);
      };
      //设置当前选中页样式
      $scope.isActivePage = function (page) {
        return $scope.selPage == page;
      };
      //上一页
      $scope.Previous = function () {
        $scope.selectPage($scope.selPage - 1);
      }
      //下一页
      $scope.Next = function () {
        $scope.selectPage($scope.selPage + 1);
        var a;
      };
      $scope.Sy = function () {
        $scope.selectPage(1);
      };
         $scope.Wy = function () {
        $scope.selectPage( $scope.pages);
     		 };	
	});
});

		
		</script>
</body>
</html>